<template>
    <div id="container">
      <div id="viewDiv"></div>
      <div style="position:absolute;top:60%;left:0;width:400px;height:40%" id="legend"></div>
    </div>
</template>
    
<script setup>
import {onMounted} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Legend from '@arcgis/core/widgets/Legend'
var map,view,legend,featureLayer1,featureLayer2
onMounted(()=>{
    const 国道符号 = {
        type: "simple-line",style: "solid",
        color: "#30ffea",width: "4px",
    }
    const 省道符号 = {//创建省道符号
        type: "simple-line", style: "solid",
        color: "#ff6207", width: "2px",
    }
    const 县道符号 = {//创建县道符号
        type: "simple-line",  style: "solid",
        color: "#ef37ac",  width: "1px",
    }
    const hwyRenderer = {
        type: "unique-value",
        defaultSymbol: 国道符号,
        defaultLabel: "国道",
        field: "类型",
        uniqueValueInfos: [
            { value: "省道",symbol: 省道符号,  label: "省道" }, 
            { value: "县道",symbol: 县道符号,  label: "县道" }
        ],
        legendOptions:{
            title:"公路类别"//这是图例子标题(位于图层标题下面)
        }
    }
    featureLayer1 = new FeatureLayer({//创建要素图层
        url: "https://ws8575.club/web/rest/services/Hosted/道路_线要素_要素图层_3857/FeatureServer/0",
        renderer: hwyRenderer,
    })
    featureLayer2=new FeatureLayer({
        title:"AOI数据",//如果Legend不设置layerInfos中不设置title,则该层图例标题为
        url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
        labelsVisible:false,//或设置为labelingInfo=[]也可以禁用要素服务标注显示
        renderer:{
            type:"simple",
            symbol:{
                type:"simple-fill",
                color:[200,200,200,0.3],
                outline:{
                    color:[100,50,50,0.8],
                    width:1
                }
            }
        }
    })
    map = new Map({
        basemap: "dark-gray-vector",
        layers: [featureLayer1,featureLayer2]
    })
    view = new MapView({
        map:map,container: "viewDiv",center: [120.2, 36.2],zoom: 10,
    })
    view.ui.remove(["zoom","attribution"]);
    view.popup.defaultPopupTemplateEnabled=true;
    const legend = new Legend({
        view: view,
        layerInfos: [{
            layer: featureLayer1,
            title:"公路系统"
            },{
            layer:featureLayer2,
            title:"AOI数据"
        }],
        container:"legend",
    })
})
</script>

<style scoped>
#container,#viewDiv{
width:100%; height:100%; padding:0;margin:0;
}
</style>
  